<!--
 * @Description: 主页头
-->
<template>
  <div class="PageHead">
    <!-- 系统切换tab -->
    <el-menu
      :default-active="activeIndex"
      class="el-menu-demo"
      mode="vertical"
      @select="handleSelect"
    >
      <el-menu-item index="/">首页</el-menu-item>
      <!-- <el-submenu
        index=""
        v-show="
          user_group == '管理员' ||
          $check_group(['/user/table', '/user_group/table'])
        "
      >
        <template slot="title"
          ><i class="el-icon-s-custom"></i
          ><span ref="customTemplate8">系统用户</span></template
        >
        <el-menu-item
          index="/user/table"
          v-show="user_group == '管理员'"
          ><span>管理员</span></el-menu-item
        >
         <el-menu-item index="/mall_users/table"  ><span>注册用户</span></el-menu-item> 
         <el-menu-item index="/mall_users/table"  v-show="user_group == '管理员' || $check_action('/mall_users/table')"><span>商场卖家</span></el-menu-item> 
      </el-submenu> -->
      <el-menu-item
        index="/forum/list"
        v-if="$check_action('/forum/list', 'get')"
        >交流论坛</el-menu-item
      >
      <el-menu-item
        index="/exam/list"
        v-if="$check_exam('/exam/list', 'answers')"
        >在线考试</el-menu-item
      >
      <el-menu-item
        index="/subject_exam/list"
        v-if="$check_action('/subject_exam/table', 'answers')"
        >自动组卷</el-menu-item
      >
      <el-menu-item index="/notice/list">网站公告</el-menu-item>
      <el-menu-item index="/article/list">
        {{ $page_title("/article/list") || "新闻通知" }}</el-menu-item
      >
      <el-menu-item index="/message/list">在线留言</el-menu-item>
      <el-menu-item index="/goods/list">商城中心</el-menu-item>
      <el-menu-item index="/custom_module/list">自定义模块</el-menu-item>
      <el-menu-item index="">
        <el-sub-menu index="">
          <template #title>商城管理</template>
          <el-menu-item :index="o.url" v-for="(o, i) in my_cart">{{
            o.name
          }}</el-menu-item>
        </el-sub-menu>
      </el-menu-item>
      <!-- <el-menu-item index="9"> 在线聊天</el-menu-item>
        <el-menu-item index="10">二维码生成</el-menu-item> -->
      <!-- v-if="nav_top && i < top_max" -->
      <!-- <el-menu-item
        index="10"
        v-for="(o, i) in nav_top"
        v-bind:key="i"
        class="nav_li"
        >{{ o.page_title }}</el-menu-item
      >-->
    </el-menu>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { $post, $get } from "@/api/Api.js";
import { Search, Edit } from "@element-plus/icons-vue";
import UserLogo from "./components/UserLogo.vue";
import {
  paramsFun,
  $check_exam,
  $fullUrl,
  $toTime,
  $banseUrl,
  $get_power,
  $check_action,
  $check_group,
  $page_title,
} from "@/utils/utils.js";
// import SearchRegion from './components/SearchRegion.vue'
import { useStore } from "vuex";
import {
  reactive,
  ref,
  computed,
  onMounted,
  getCurrentInstance,
  onBeforeMount,
  onUpdated,
} from "vue";
// const { appContext } = getCurrentInstance();
// appContext.config.globalProperties.$loadExternalScript();
let store = useStore();
let router = useRouter();
let auth = computed(() => store.state.web.auth);
let user_group = computed(() => store.state.userStoreModule.user_group);
let userStore = computed(() => store.state.userStoreModule);
let activeIndex = ref("");
let top_max = ref(15);
let angle1 = ref(0);
let angle2 = ref(0);
let angle3 = ref(0);
let visible = ref(true);
let show = ref(false);
let my_show = ref(false);
let nav_top = ref([]);
let my_cart = ref([
  {
    name: "我的购物车",
    url: "/cart/list",
  },
  {
    name: "我的订单",
    url: "/order/list",
  },
  {
    name: "我的地址",
    url: "/user/address",
  },
]);
let my_nav = ref([
  {
    name: "我的账户",
    url: "/user/index",
  },
]);
let not_login_dropdown = ref([
  {
    name: "登录",
    url: "/account/login",
  },
]);
let showInput = ref(false);
let search_val = ref("");
let logo = ref("");
let user_nickname = ref("");
let user_avatar = ref("");
let nav_target = ref(null);

// 发布论坛
let toForumEdit = () => {
  router.push("/forum/edit");
};
// 发布留言
let toMessageEdit = () => {
  router.push("/message/edit");
};
let handleSelect = (key, keyPath) => {
  console.log(key);
  // console.log(keyPath)
  router.push(key);
  //   let menuList = []
  //   let menuListRouter = []
  //   tabSystemList.value.forEach((tabSys) => {
  //     if (tabSys.menuName === key) {
  //       menuListRouter = tabSys.children
  //     }
  //   })
  //   // store.commit('permissionStoreModule/setTabSystemTitle', key)
  //   // permissionHelper.initRouterNode(menuList, menuListRouter)
  //   // store.commit('permissionStoreModule/setMenuList', menuList)

  //   // 切换系统后默认选中新系统第一个菜单
  //   router.push({
  //     path: goPath.value,
  //   })
};

// 获取导航栏
let get_nav_top = async () => {
  if (auth.value.length > 0) {
    var arr = [];
    // for (var i = 0; i < auth.value.length; i++) {
    //   var o = auth.value[i];
    //   if (o["position"] == "top") {
    //     arr.push(o);
    //   }
    // }
    // nav_top.value = arr;
    var lt = [];
    for (var i = 0; i < auth.value.length; i++) {
      var o = auth.value[i];
      if (o.path.indexOf("/table") !== -1) {
        let list = [
          "exam",
          "article",
          "article_type",
          "subject",
          "comment",
          "goods",
          "order",
          "forum",
          "forum_type",
          "notice",
        ];
        list.push("mall_center");
        list.push("mall_users");
        list.push("seller");
        if (list.indexOf(o.table_name) === -1) {
          lt.push(o);
        }
      }
    }
    nav_top.value = lt;
  }
  // return lt;
  // } else {
  //   //|| $.db.get("user_group") ;

  //   var user_groupobj = "";
  //   if (typeof user_group !== "string") {
  //     user_groupobj = "游客";
  //   } else {
  //     user_groupobj = user_group || "游客";
  //   }

  //   var res = await $get(
  //     "/api/auth/get_list?" +
  //       paramsFun(
  //         {
  //           user_group: user_groupobj,
  //           get: 1,
  //           position: "top",
  //           page: "",
  //         },
  //         true
  //       )
  //   ).then((res) => {
  //     if (res.result && res.result.list) {
  //       nav_top.value = res.result.list;
  //     }
  //   });
  // }
};

let up_gd = () => {
  if (userStore.value) {
    user_avatar.value = userStore.value.avatar;
    user_nickname.value = userStore.value.nickname;
  }
};

let keep = (width) => {
  let display = nav_target.value.style.display;
  if (width >= 960 && display === "none") {
    nav_target.value.style.display = "block";
    //this.$refs.search.style.display = 'flex';
  }
};

onBeforeMount(() => {
  get_nav_top();
});
onUpdated(() => {
  up_gd();
});
</script>

<style lang="less" scoped>
.PageHead {
  height: 60px;
  display: flex;
  align-items: center;
  padding: 0 10px;
  border-bottom: solid 1px var(--el-menu-border-color);
  .pagehead-icon {
    height: 61px;
    font-size: 26px;
    border-bottom: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    cursor: pointer;
  }
  .pagehead-tab {
    flex: 1;
    .item-icon {
    }
    .item-name {
      margin-left: 5px;
      font-size: 16px;
    }
  }
  .user-center {
    .el-menu-item {
      font-size: 10px;
      padding: 0 5px;
    }
  }
}
</style>
